<template>
	<!-- 我的 -->
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="status_title">
			<view class="status_right"></view>
			<view class="status_center">我的</view>
			<view class="status_right"></view>
		</view>
		<!-- 头部----头像、name、绑定手机号、余额、优惠、积分 -->
		<view class="top">
			<view v-show="show">
				<view class="top-top" @click="goMeInfo">
					<view class="top-top-img">
						<img src="https://cdn.uviewui.com/uview/swiper/swiper3.png" alt="" />
					</view>
					<view class="top-top-name">
						{{name}}
					</view>
					<view class="top-top-shouji">
						<u-icon name="phone" color="#fff"></u-icon>暂未绑定
					</view>
					<view class="top-top-right">
						<u-icon name="arrow-right" color="#fff" size="10"></u-icon>
					</view>
				</view>
				<view class="top-xia">
					<!-- 余额 -->
					<view class="ont top-div">
						<span>0.00</span>元
						<p>我的余额</p>
					</view>
					<!-- 优惠 -->
					<view class="tow top-div">
						<span>0.00</span>元
						<p>我的余额</p>
					</view>
					<!-- 积分 -->
					<view class="three top-div">
						<span>0.00</span>元
						<p>我的余额</p>
					</view>
				</view>
			</view>
			<view>
				<view class="top-top" v-show="showw">
					<button class="login" @click="goLogin">登录</button>
				</view>
			</view>
		</view>
		<!-- 我的订单、积分商城、起点外卖会员卡··· -->
		<view class="list-data">
			<view class="list-data-div">
				<view class="list-data-img">
					<img src="http://chenghaohaocheng.oss-cn-beijing.aliyuncs.com/icon/%E8%AE%A2%E5%8D%95.png" alt="" />
				</view>
				<view class="list-data-text">
					我的订单 <span><u-icon name="arrow-right" size="13" color="#d6d6d6"></u-icon></span>
				</view>
			</view>
			<view class="list-data-div">
				<view class="list-data-img">
					<img src="http://chenghaohaocheng.oss-cn-beijing.aliyuncs.com/icon/%E9%92%B1%E9%92%B1%E9%92%B1.png" alt="" />
				</view>
				<view class="list-data-text">
					积分商城 <span><u-icon name="arrow-right" size="13" color="#d6d6d6"></u-icon></span>
				</view>
			</view>
			<view class="list-data-div">
				<view class="list-data-img">
					<img src="http://chenghaohaocheng.oss-cn-beijing.aliyuncs.com/icon/hyjg.png" alt="" />
				</view>
				<view class="list-data-text">
					起点外卖会员卡 <span><u-icon name="arrow-right" size="13" color="#d6d6d6"></u-icon></span>
				</view>
			</view>
		</view>
		<!-- 服务中心 -->
		<view class="lou">
			<view class="list-data-div">
				<view class="list-data-img">
					<img src="http://chenghaohaocheng.oss-cn-beijing.aliyuncs.com/icon/%E5%A4%A7%E6%A5%BC%2C%E5%BB%BA%E7%AD%91.png" alt="" />
				</view>
				<view class="list-data-text">
					服务中心 <span><u-icon name="arrow-right" size="13" color="#d6d6d6"></u-icon></span>
				</view>
			</view>
		</view>
		<!-- 退出按钮 -->
		<view v-show="show">
			<u-button type="primary" size="large" text="退出" color="#ff0000" style="height: 80rpx;font-weight: 900;" @click="outLogin">退出</u-button>
		</view>
	</view>
</template>

<script>
	export default {
	      data() {
	        return {
	          name:'',
			  show:true,
			  showw:false
	        }
	      },
		  onShow() {
		  	// console.log('showshow');
			const token=uni.getStorageSync('token')
			if(token){
				this.name=uni.getStorageSync('name')
				this.show=true
				this.showw=false
			}else{
				this.show=false
				this.showw=true
			}
		  },
	      methods: {
	        goMeInfo(){
				uni.navigateTo({
					url:'/pages/myDetails/myDetails'
				});
			},
			outLogin(){
				uni.clearStorageSync()
				this.show=!this.show
				this.showw=!this.showw
			},
			goLogin(){
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
	      }
		}
</script>

<style scoped lang="scss">
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	  background: #02a774;
	}
	.status_title {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 35px;
		padding: 0 16px;
		background-color: #02a774;
		.status_center {
			font-size: 17px;
			font-weight: 700;
			color: #fff;
		}
	}
	.top{
		// height: 150rpx;
		margin-bottom: 20rpx;
		view{
			.top-top{
				height: 150rpx;
				padding: 50rpx 0;
				background-color: #02a774;
				color: #fff;
				position: relative;
				.top-top-img{
					border-radius: 100px;
					overflow: hidden;
					width: 100rpx;
					height: 100rpx;
					float: left;
					margin: 0 40rpx;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.top-top-name{
					font-weight: 900;
					margin-bottom: 30rpx;
				}
				.top-top-shouji{
					font-size: 25rpx;
					.u-icon{
						float: left;
						padding: 5rpx 10rpx 0 0;
					}
				}
				.top-top-right{
					position: absolute;
					right: 60rpx;
					top: 90rpx;
				}
				.login{
					width: 200rpx;
				}
			}
			.top-xia{
				background: #f5f5f5;
				height: 210rpx;
				border-bottom: 1px solid #e1e1e1;
				text-align: center;
				.top-div{
					width: 33.1%;
					height: 150rpx;
					padding-top: 30rpx;
					float: left;
					line-height: 65rpx;
					font-size: 30rpx;
					color: #a1a1a1;
					span{
						font-weight: 900;
						font-size: 55rpx;
					}
				}
				.ont{
					border-right: 1px solid #e1e1e1;
					span{
						color: #ff9900;
					}
				}
				.tow{
					border-right: 1px solid #e1e1e1;
					span{
						color: #ff5f3e;
					}
				}
				.three{
					span{
						color: #6ac20b;
					}
				}
			}
		}
	}
	.list-data{
		height: 355rpx;
		// background: pink;
		border-top: 1px solid #d6d6d6;
		border-bottom: 1px solid #d6d6d6;
		.list-data-div{
			background: red;
			.list-data-img{
				padding: 40rpx 20rpx 20rpx 20rpx;
				width: 40rpx;
				height: 40rpx;
				float: left;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.list-data-text{
				width: 675rpx;
				padding: 40rpx 0;
				float: left;
				border-bottom: 1px solid #d6d6d6;
				font-size: 25rpx;
				span{
					float: right;
				}
			}
		}
	}
	.lou{
		.list-data-div{
			background: red;
			.list-data-img{
				padding: 30rpx 20rpx 20rpx 20rpx;
				width: 40rpx;
				height: 40rpx;
				float: left;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.list-data-text{
				width: 675rpx;
				padding: 30rpx 0;
				float: left;
				font-size: 25rpx;
				span{
					float: right;
				}
			}
		}
	}
</style>
